<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <van-field required readonly clickable size="large" :value="postData.t_Name" label="信息标题" placeholder="请选择" style="font-size: 16px" @click="showPicker_type = true" />
      <van-popup v-model="showPicker_type" round position="bottom">
        <van-picker title="信息标题" show-toolbar :columns="picker_type_data" :default-index="picker_type_defaultIndex" @confirm="onPickerTypeSubmit" @cancel="showPicker_type = false" />
      </van-popup>

      <van-field v-if="postData.t_Name == '自定义'" required v-model="difineName" size="large" label="自定义标题" maxlength="40" placeholder="请填写" style="font-size: 16px" />

      <div class="resume-content-tip">
        <span>简短描述</span>
        <van-field v-model="postData.information" show-word-limit maxlength="500" rows="10" autosize type="textarea" placeholder="简短描述" style="font-size: 16px;color: #333;line-height: 22px;" />
      </div>

      <div style="margin: 16px">
        <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" :loading="loading_submit" :disabled="disabled_submit" @click="onSubmit">
        </van-button>
      </div>

    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { Field, Picker, Popup, Button, Toast } from 'vant';
import { GetResumeAddInfoType } from '@/util/selectData'
import { mixin_person_resumeSumbitBack } from '@/mixin/mixins'
import Global from '@/Global';
export default {
  name: 'ResumeAddInfo',
  components: {
    NavBar,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Button.name]: Button,
  },
  props: ['title', 'data'],
  mixins: [mixin_person_resumeSumbitBack],
  mounted() {
    this.postData.id = this.$route.params.data ? this.$route.params.data.id : 0;
    if (this.postData.id != 0) {
      this.$api.get('/Resume/GetAddInfo', { id: this.postData.id }).then(res => {
        if (res.success) {
					let data = res.response;
          this.postData.t_Name = data.t_Name;
          this.postData.information = data.information;
					if(data.t_Name.indexOf('O_') !=-1){
						this.difineName = this.postData.t_Name.replace('O_','');
						this.postData.t_Name = '自定义'
					}
        }
      })
    }
  },
  // 定义属性
  data() {
    return {
      postData: {
        id: 0,
        t_Name: '',
        information: ''
      },
      difineName: '',
      showPicker_type: false,
      picker_type_data: GetResumeAddInfoType(),
      picker_type_defaultIndex: 0,

      loading_submit: false,
    }
  },
  computed: {
    disabled_submit() {
       if (this.postData.t_Name != '' && this.postData.information != '')
          return false;
      return true;
    }
  },
  // 方法集合
  methods: {
    onPickerTypeSubmit(value) {
      this.showPicker_type = false;
      this.postData.t_Name = value;
			if(value!='自定义'){
				this.difineName = '';
			}
			else{
				this.difineName = '自定义'
			}
    },
    onSubmit() {
      if (this.difineName != '') { this.postData.t_Name = 'O_' +  this.difineName }
      this.loading_submit = true;
      this.$api.post('/Resume/SaveAddInfo', this.postData).then(res => {
        this.loading_submit = false;
        if (res.success) {
          Toast.success('保存成功');
          this.$bus.$emit(Global.bus_person_resume_update, 'ok');
          this.goBack();
        }
        else { Toast.fail(res.msg) }
      })
    }
  },
}
</script>

<style scoped>
.resume-content-tip {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.resume-content-tip span {
  padding: 16px 16px 8px;
  font-size: 16px;
  color: #646566;
  line-height: 16px;
}
</style>